import React, {PureComponent} from 'react';
import {Card, List, NavBar, WhiteSpace, Icon, WingBlank} from 'antd-mobile';

import {getLessonFeedBackDetail} from '../../service/api'
import styles from "./index.module.less";

const Item = List.Item;
const Brief = Item.Brief;

const CLASS_STATUS = [
    '未备课',
    '未上课',
    '上课中',
    '未批改',
    '未评价',
    '已完成',
    '未发布'
]

export default class StudentFeedbackDetail extends PureComponent {

    constructor(props) {
        super(props);
        this.state = {
            feedback: {}
        }
    }


    componentDidMount() {
        this.getLessonData();
    }

    /**
     * 获得数据
     */
    getLessonData = () => {
        const {history} = this.props;
        const { startDate, endDate } = this.state;
        const studentId = new URLSearchParams(history.location.search).get("studentId");
        const lessonId = new URLSearchParams(history.location.search).get("lessonId");
        getLessonFeedBackDetail({studentId, lessonId}).then(res => {
            if (res.status === 0) {
                this.setState({
                    feedback: res.data || {},
                })
            }
        }).catch(err => {
        })
    }

    /**
     * 展示课程信息
     */
    showLessonInfo = () => {
        const {feedback: {lessonInfo, lessonFeedBack}} = this.state;
        if(lessonInfo) {
            return <>
                <WhiteSpace/>
                <Card>
                    <Card.Header
                        title={lessonInfo.lessonName}
                        extra={CLASS_STATUS[lessonInfo.classStatus]}
                    />
                    <Card.Body>
                        <div>反馈老师：{this.state.feedback.teacherName}</div>
                        {!lessonFeedBack && <div>暂无反馈</div>}
                        {
                            lessonFeedBack && <div className={styles.content}>
                                <div>
                                    上课内容: {lessonFeedBack.lessonContent}
                                </div>
                                <div>
                                    课后作业: {lessonFeedBack.lessonHomeWork}
                                </div>
                                <div>
                                    下次课程: {lessonFeedBack.nextLessonContent}
                                </div>
                            </div>
                        }
                    </Card.Body>
                </Card>
            </>
        }
    }

    /**
     * 展示学生反馈
     */
    showStudentFeedBack = () => {
        const { feedback } = this.state;
        return <>
            <WhiteSpace/>
            <List className="my-list">
                <Item>课程完成度<Brief>{feedback.finishRate || '(未反馈)'}</Brief></Item>
                <Item>课程正确率<Brief>{feedback.correctRate || '(未反馈)'}</Brief></Item>
                <Item>评价<Brief>{feedback.comment || '(未反馈)'}</Brief></Item>
                <Item>上课态度<Brief>{feedback.lessonAttitude || '(未反馈)'}</Brief></Item>
                <Item>回答问题态度<Brief>{feedback.answerAttitude || '(未反馈)'}</Brief></Item>
                <Item>课堂笔记<Brief>{feedback.lessonNote || '(未反馈)'}</Brief></Item>
                <Item>课堂做题情况<Brief>{feedback.lessonDoSubjectInfo || '(未反馈)'}</Brief></Item>
                <Item>知识掌握程度<Brief>{feedback.knowledgeGetRate || '(未反馈)'}</Brief></Item>
                <Item>优点<Brief>{feedback.advantage || '(未反馈)'}</Brief></Item>
                <Item>缺点<Brief>{feedback.disadvantage || '(未反馈)'}</Brief></Item>
                <Item>备注<Brief>{feedback.otherMark || '(未反馈)'}</Brief></Item>
            </List>
            </>
    }


    /**
     * 返回上个页面
     */
    goBack = () => {
        this.props.history.goBack(-1);
    }

    render() {
        const { feedback } = this.state;
        return <>
            <NavBar
                mode="light"
                icon={<Icon type="left" onClick={this.goBack}/>}
                onLeftClick={() => console.log('onLeftClick')}
            >
                <span>
                    {`${feedback.studentDetail ? feedback.studentDetail.name : '无名'} 课程反馈`}
                </span>
                    {/*<span className={styles.time} onClick={this.onSelectDate}>*/}
                        {/*{`<${moment(startDate).format("YYYY-MM-DD")} 至 ${moment(endDate).format("YYYY-MM-DD")}>`}*/}
                    {/*</span>*/}
            </NavBar>
            <WingBlank>
                {this.showLessonInfo()}
                {this.showStudentFeedBack()}
            </WingBlank>

        </>
    }

}
